<!DOCTYPE html>
<html class="x-admin-sm">

<head>
<meta charset="UTF-8">
<title>欢迎页面-X-admin2.2</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
<link rel="stylesheet" href="../../css/font.css">
<link rel="stylesheet" href="../../css/xadmin.css">
<script src="../../lib/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="../../js/xadmin.js"></script>
</head>

<body>
	<div class="x-nav">
		<span class="layui-breadcrumb"> <a href="">首页</a> <a href="">演示</a>
			<a> <cite>导航元素</cite></a>
		</span> <a class="layui-btn layui-btn-small"
			style="line-height: 1.6em; margin-top: 3px; float: right"
			onclick="location.reload()" title="刷新"> <i
			class="layui-icon layui-icon-refresh" style="line-height: 30px"></i>
		</a>
	</div>
	
	<div class="layui-fluid">
		<div class="layui-row" id="view" >
		
		</div>
	</div>
	<audio autobuffer="autobuffer" id="audioSrc"></audio> 
</body>

<script type="text/html" id="order-card">

{{#  layui.each(d, function(index, item){ }}

<div class="layui-card" style="margin-bottom: 20px">
<div class="layui-card-header">
	<span>订单号： {{ item.orderNumber }}</span> <span
		style="float: right; color: red">流水号：{{item.orderSort}}</span>
</div>
<div class="layui-card-body">
	<table class="layui-table" lay-skin="line">
		<colgroup>
			<col width="300">
			<col>
			<col>
			<col>
		</colgroup>
		<thead>
			<tr>
				<th>菜品</th>
				<th>数量</th>
				<th>规格名称</th>
				<th>规格</th>
			</tr>
		</thead>
		<tbody>
			{{#  layui.each(item.goods, function(index, it){ }}
			<tr>
				<td>{{ it.name}}</td>
				<td>{{ it.num}}</td>
				<td>{{ it.specificationName}}</td>
				<td>{{ it.specification}}</td>
			</tr>
			{{#  }); }}
		</tbody>
		<tfoot>
			<tr>
				<td colspan="4"><span style='color:red'>{{item.remarks}}</span></td>
			</tr>
		</tfoot>

	</table>
</div>
<div class="layui-card-body">
	<button onclick="orderCall({{item.orderSort}})" class="layui-btn layui-btn-radius layui-btn-normal">呼叫取餐</button>
	<button onclick="updateOrder('success',`{{item.id}}`)" class="layui-btn layui-btn-radius">完成订单</button>
</div>
</div>
{{#  }); }}
</script>

<script>
	layui.use([ 'element', 'jquery','laytpl'], function() {
		var element = layui.element;
		var $ = layui.jquery;
		var laytpl = layui.laytpl;
		
		$.post("findOrderHandle", function(res) {
			var data = res.data;
			var getTpl = document.getElementById('order-card').innerHTML;
			
			var view = document.getElementById('view');
			
			laytpl(getTpl).render(data, function(html){
				
			  	view.innerHTML = html;
			});
		})
	});
	
	function orderCall(value){
		
		$.post("orderCall",{code:value},function(res) {
			
			var audio = document.getElementById("audioSrc");
			console.log(res);
			var music = "data:audio/wav;base64,"+res.data;
			audio.src=music;
			audio.play();
			
		});
		
	}
	function updateOrder(code,id){
		
		
		
		$.post("updateOrderStatus",{code:code,orderId:id},function(res) {
			
			layer.msg(res.msg);
			if (code == 'close') {
				setTimeout(function(){
					location.reload();
				},2000)
			}
		});
		
	}
	
</script>

</html>